<template>
  <div class="dashboard-content" style="position:absolute;width:100%;">
    <el-card shadow="none" :body-style="{padding: '0px', position:'absolute', height:'100%', width: '100%'}">
      <div class="card-box clearfix" style="height:100%;">
        <div slot="header" class="clearfix card-title">
          <span>{{content.name}}</span>
          <el-button class="btn-more" type="text">更多 <i class="el-icon-d-arrow-right"></i></el-button>
        </div>
        <template>
          <div class="tabs-content-box">
            <div class="process-list">
              <div class="title">{{processList.applyName}}</div>
              <div>
                <div class="process-info" :style="{backgroundImage:'url('+triangleIcon+')'}" v-for="(item,index) in applyList" :key="index+'_apply'">
                  <span class="circle">{{item.proValue}}</span>
                  <span class="pro-name">{{item.proName}}</span>
                </div>
              </div>
            </div>
            <div class="process-list">
              <div class="title">{{processList.loanName}}</div>
              <div>
                <div class="process-info" :style="{backgroundImage:'url('+triangleIcon+')'}" v-for="(item,index) in loanList" :key="index+'loan'">
                  <span class="circle">{{item.proValue}}</span>
                  <span class="pro-name">{{item.proName}}</span>
                </div>
              </div>
            </div>
            <div class="process-list">
              <div class="title">{{processList.expenseName}}</div>
              <div>
                <div class="process-info" :style="{backgroundImage:'url('+triangleIcon+')'}" v-for="(item,index) in expenseList" :key="index+'expense'">
                  <span class="circle">{{item.proValue}}</span>
                  <span class="pro-name">{{item.proName}}</span>
                </div>
              </div>
            </div>
            <div class="process-list" style="width:50%;">
              <div class="title">{{processList.paymentName}}</div>
              <div>
                <div class="process-info" :style="{backgroundImage:'url('+triangleIcon+')'}" v-for="(item,index) in paymentList" :key="index+'expense'">
                  <span class="circle">{{item.proValue}}</span>
                  <span class="pro-name">{{item.proName}}</span>
                </div>
              </div>
            </div>
            <div class="process-list">
              <div class="title">{{processList.voucherName}}</div>
              <div>
                <div class="process-info" :style="{backgroundImage:'url('+triangleIcon+')'}" v-for="(item,index) in voucherList" :key="index+'expense'">
                  <span class="circle">{{item.proValue}}</span>
                  <span class="pro-name">{{item.proName}}</span>
                </div>
              </div>
            </div>
            <div class="approval-info" style="float:left;">
              <div class="tableTitle">{{approvalList.expenditureTitle}}</div>
              <div class="part-info">
                  <span>总金额(元)</span>
                  <span class="part-value color1">{{approvalList.totalAmount}}</span>
              </div>
              <div class="part-info">
                  <span>已执行金额(元)</span>
                  <span class="part-value color2">{{approvalList.executed}}</span>
              </div>
              <div class="part-info">
                  <span>剩余金额(元)</span>
                  <span class="part-value">{{approvalList.surplus}}</span>
              </div>
              <div class="part-info">
                  <span>执行比例</span>
                  <span class="part-value color3">{{approvalList.executionRate}}</span>
              </div>
            </div>
            <div class="approval-info" style="float:right;">
              <div class="tableTitle">{{approvalList.fundPlanTitle}}</div>
              <div class="part-info">
                  <span>已申请(元)</span>
                  <span class="part-value color1">{{approvalList.applied}}</span>
              </div>
              <div class="part-info">
                  <span>已批复(元)</span>
                  <span class="part-value color2">{{approvalList.approved}}</span>
              </div>
              <div class="part-info">
                  <span>已使用(元)</span>
                  <span class="part-value color3">{{approvalList.used}}</span>
              </div>
              <div class="part-info">
                  <span>剩余额度</span>
                  <span class="part-value">{{approvalList.surplusAmount}}</span>
              </div>
            </div>
          </div>
        </template>
      </div>
    </el-card>
  </div>
</template>

<script>
import { approvalGr } from './data/Content.js';
export default {
    name: 'approvalGr',
    props: ['content'],
    data(){
        return {
            processList:[],
            applyList:[],
            loanList:[],
            expenseList:[],
            paymentList:[],
            voucherList:[],
            approvalList: [],
            triangleIcon: require('@/assets/img/component/triangle2.png')
        };
    },
    created:function (){
        this.getApprovalList();
    },
    methods: {
        getApprovalList(){
            this.$axios.get(approvalGr.url).then(res => {
                this.processList = res.data[0].processList[0];
                this.applyList = res.data[0].processList[0].applyPro; 
                this.loanList = res.data[0].processList[0].loanPro;
                this.expenseList = res.data[0].processList[0].expensePro;
                this.paymentList = res.data[0].processList[0].paymentPro;
                this.voucherList = res.data[0].processList[0].voucherPro;
                this.approvalList = res.data[0].approvalList[0];
            });
        },
    },
    mounted() {
        
    }
};
</script>
<style lang="scss" scoped>
.color1{
    color:#0066FF!important;
}
.color2{
    color:#FF6633!important;
}
.color3{
    color:#00CC99!important;
}
.tableTitle{
  font-size:14px;
  font-weight:bold;
  color:#333;
  margin-bottom:6px;
}
.process-list{
  box-sizing: border-box;
  width:32%;
  padding:10px 2%;
  display:inline-block;
  .title{

  }
  .process-info{
    width:105px;
    display:inline-block;
    margin-top:16px;
    background-position: 60px 18px;
    background-repeat: no-repeat;

    span.circle{
      display:block;
      width:48px;
      height:48px;
      border-radius:50%;
      background:rgba(0,102,255,0.1);
      text-align:center;
      line-height: 48px;
      color:#0066FF;
    }
    span.pro-name{
      display:block;
      margin-top:10px;
    }
  }
  .process-info:last-child{
    background-image:none!important;
  }
}
.approval-info{
  box-sizing:border-box;
  width:48%;
  background: #F8F8F8;
  border-radius: 4px;
  padding:15px 2%;
  margin:10px 1%;
  
  .part-info{
    display:inline-block;
    padding-right: 5%;
    span{
        color:#666;
        font-size:12px;
        display:block;
        padding: 5px 0;
    }
    span.part-value{
        font-size:16px;
        font-weight:bold;
        color:#333;
    }
  }
}
</style>
